<template>
  <!-- 传一个${classPrefix}前缀值，控制两个div的样式 -->
  <div class="layout-wrapper" :class="classPrefix && `${classPrefix}-wrapper`">
    <div class="content" :class="classPrefix && `${classPrefix}-content`   ">
      <slot/>
    </div>
    <Nav/>
  </div>
</template>
<script lang="ts">
export default {
  name: "Layout",
  props: ['classPrefix'],
}
</script>
<style lang="scss" scoped>
.layout-wrapper{
  display: flex;
  flex-direction:column;
  min-height: 100vh;
}
.content{
  flex-grow: 1;
  overflow: auto;
}
</style>